解决子元素click对父元素mousedown的影响 |
您所在的位置：网站首页 › js body设置onmousedown后内部按钮失效 › 解决子元素click对父元素mousedown的影响 |
解决子元素click对父元素mousedown的影响
|
如题，在最子元素绑定click事件，父元素绑定mousedown事件。 由于事件冒泡的影响，当子元素触发click的时候，其父元素的mousedown也会被触发。 var big_ele = document.querySelector(".big-box"); var small_ele = document.querySelector(".small-box"); big_ele.onmousedown = function(){ alert("这是大盒子"); } small_ele.onclick = function(){ alert("这是小盒子"); }
很简单，但是会有点麻烦，就是保持父元素事件不变，将子元素的click事件换成mousedown和mouseup事件。 mousedown中的回调函数里阻止事件冒泡mouseup中的回调函数里放原本click要执行的代码。 small_ele.onmousedown = function(ev){ var e = ev || event; if(typeof e.stopPropagation === "function" ){ e.stopPropagation(); }else{ e.cancelBubble = true; } } small_ele.onmouseup = function(){ alert("这是小盒子"); }这样子元素的点击事件就能如愿响应了。 |
如上图点击绿色小盒子时，会触发大盒子的mousedown事件。
如果大家有更好跟方便的解决办法，欢迎留言讨论！【本文地址】
今日新闻 |
推荐新闻 |